<template>
	<div class="wrapper">
		<swiper :options="swiperOption" ref="mySwiper">
		    <!-- slides -->
		    <swiper-slide class="box" v-for="item in imgUrl" :key="item.id"><img :src="item.url"/></swiper-slide>
		    <!-- Optional controls -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'//引用样式
	import {swiper,swiperSlide} from 'vue-awesome-swiper'//使用组件
	export default{
		name:"Swiper",
		props:{
			imgUrl:Array
		},
		components:{//注册组件
			swiper,
			swiperSlide
		},
		data(){
			return {
				swiperOption:{
					//和官网swiper配置一模一样
					pagination:".swiper-pagination",
					autoplay:20000,
					loop:true,
					
				},
//				"imgUrl":[
//					{"id":"001","url":"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/81f5e1c19d95227c5d9b593dd02de787.jpg_750x200_e1780a55.jpg"},
//					{"id":"002","url":"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/1d8faa9f4d49b77ca1e61e2b478260f7.jpg_750x200_25cf76e2.jpg"},
//					{"id":"003","url":"https://imgs.qunarzz.com/piao/fusion/1812/48/5713e2a2ba72f902.jpg_750x200_2b382dac.jpg"},
//					{"id":"004","url":"https://imgs.qunarzz.com/piao/fusion/1709/39/b98fdb3ee7478e02.jpg_750x200_be64b756.jpg"}
//				]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	/*样式穿透*/
	.wrapper>>>.swiper-pagination-bullet-active{
		background:white;
	}
	
	.wrapper{
		width:100%;
		height:0;
		overflow:hidden;
		padding-bottom:26.6666%;
	}
	.wrapper .box{touch-action:none;}
	.wrapper .box img{width:100%;}
</style>